<template>
    <el-dialog title="修改用户" :visible.sync="dialogFormVisible" :append-to-body="true">
        <el-form :model="form" ref="elForm">
            <div class="table-from">
                <el-form-item label="名称" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="form.username" autocomplete="off"
                              maxlength="20" show-word-limit :style="{width:'350px'}"
                    >
                    </el-input>
                </el-form-item>
                
                <el-form-item label="角色" :label-width="formLabelWidth" prop="role"
                              :rules="[
                             {required:true,message:'请设置角色'},
                            ]">
                    <el-select v-model="form.role.name" placeholder="请设置角色"
                               filterable
                               allow-create
                               default-first-option
                               :class="tableClass.role"
                    >
                        <el-option v-for="(element,index) in roles"
                                   v-show="element !== null"
                                   :key="index"
                                   :value="element"
                                   :label="element"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updatePaper">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>

import { putData } from "@/utils/Util";

export default {
    name: "editUserDialog",
    created() {
        // console.log("模态框收到::",this.form);
        // window.addEventListener("storage", this.initComponent,false);
    },
    beforeDestroy() {
        // window.removeEventListener("storage", this.initComponent,false);
    },
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                username: "",
                role: {}
            },
            rulesCheck: [],
            
            style: {
                select: {
                    width: "120px"
                }
            },
            tableClass: {
                select: "table-select",
                from: "table-from"
            },
            classList: ["语文", "数学", "英语"],
            roles: [],
            formLabelWidth: "80px"
            
        };
    },
    methods: {
        setVisible(flag) {
            this.dialogFormVisible = flag;
            this.initComponent();
        },
        updatePaper() {
            // 执行更新操作
            this.$refs.elForm.validate(valid => {
                if (valid) {
                    this.dialogFormVisible = false;
                    // console.log("表单::", this.form);
                    putData("/user/" + this.form.id, {
                        username: this.form.username,
                        role_id: this.getRole(this.form.role.name)
                    }).then(res => {
                        console.log("更新完成::", res);
                        if (res >= 1) {
                            this.$emit("updated", this.form);
                        }
                    });
                }
            });
        },
        initComponent() {
        
        },
        getRole(role) {
            for (let i = this.roles.length - 1; i >= 0; i--) {
                if (role === this.roles[i]) {
                    return i+1;
                }
            }
        }
    }
};
</script>

<style scoped lang="scss">
    .table-from {
        display: flex;
        flex-wrap: wrap;
    }
    
    .table-select {
        width: 120px;
    }
</style>